import { useState, useEffect } from 'react';
import { cn } from '@/lib/utils';
import { useLanguage } from '@/contexts/LanguageContext';
import { useCart } from '@/contexts/CartContext';
import { Link } from 'react-router-dom';


export default function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [showLanguageDropdown, setShowLanguageDropdown] = useState(false);
  const { totalItems } = useCart();
  const [scrolled, setScrolled] = useState(false);
  const { language, setLanguage, t } = useLanguage();

  // Handle scroll event for navbar styling
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 10);
    };
    
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const dropdown = document.getElementById('language-dropdown');
      const button = document.getElementById('language-button');
      
      if (dropdown && button && !dropdown.contains(event.target as Node) && !button.contains(event.target as Node)) {
        setShowLanguageDropdown(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <header 
      className={cn(
    "fixed w-full z-50 transition-all duration-300",
    scrolled ? "bg-white shadow-md py-2" : "bg-black/10 py-4"
      )}
     >
      <div className="container mx-auto px-4 relative">
        {/* Mobile menu backdrop */}
        {isMenuOpen && (
          <div className="fixed inset-0 bg-black/50 backdrop-blur-md z-40 animate-in fade-in duration-300" 
               onClick={() => setIsMenuOpen(false)}></div>
        )}
     <div className="flex justify-between items-center relative z-50">
          {/* Logo */}
          <a href="#" className="text-2xl font-bold text-blue-800 flex items-center">
            <i className="fa-solid fa-wrench mr-2"></i>
            <span>ProHardware</span>
          </a>

          {/* Mobile Menu Button */}
          <button 
            className="md:hidden text-gray-800"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
          >
            <i className={`fa-solid ${isMenuOpen ? 'fa-times' : 'fa-bars'} text-xl`}></i>
          </button>
          
          {/* Desktop Navigation */}
  <nav className="hidden md:flex items-center space-x-8">
     <a href="/" className={`font-medium ${scrolled ? 'text-gray-800' : 'text-white'} hover:text-blue-600 transition-colors`}>{t('home')}</a>

      <a href="/shop" className={`font-medium ${scrolled ? 'text-gray-800' : 'text-white'} hover:text-blue-600 transition-colors`}>{t('categories')}</a>
      <a href="/about" className={`font-medium ${scrolled ? 'text-gray-800' : 'text-white'} hover:text-blue-600 transition-colors`}>{t('about')}</a>
      <a href="/contact" className={`font-medium ${scrolled ? 'text-gray-800' : 'text-white'} hover:text-blue-600 transition-colors`}>{t('contact')}</a>
   </nav>

    {/* Action Icons - Desktop Only */}
          <div className="hidden md:flex items-center space-x-4">
            <button className="text-gray-800 hover:text-blue-600 transition-colors" aria-label={t('search')}>
              <i className="fa-solid fa-search text-xl"></i>
            </button>
            <Link to="/cart" className="relative group" id="cart-icon-container">
              <button className="text-gray-800 hover:text-blue-600 transition-colors" aria-label={t('cart')}>
                <i className="fa-solid fa-shopping-cart text-xl"></i>
              </button>
              {totalItems > 0 && (
                <span className="absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center group-hover:scale-110 transition-transform">
                  {totalItems}
                </span>
              )}
            </Link>
            
            {/* Language Dropdown */}
            <div className="relative" id="language-dropdown">
              <button 
                id="language-button"
                onClick={() => setShowLanguageDropdown(!showLanguageDropdown)}
                className="flex items-center space-x-1 px-3 py-1.5 bg-blue-600 text-white rounded-full text-sm font-medium hover:bg-blue-700 transition-all shadow-md hover:shadow-lg"
                aria-label={t('language')}
              >
                <i className="fa-solid fa-globe"></i>
                 <span className="hidden md:inline">{language === 'en' ? 'English' : '中文'}</span>
                <i className={`fa-solid fa-chevron-down ml-1 text-xs transition-transform ${showLanguageDropdown ? 'rotate-180' : ''}`}></i>
              </button>
              
              {showLanguageDropdown && (
                <div className="absolute right-0 mt-2 w-40 bg-white rounded-xl shadow-lg py-1 z-50 animate-in fade-in slide-in-from-top-5 duration-200">
                  <button 
                    onClick={() => { setLanguage('en'); setShowLanguageDropdown(false); }}
                    className={`w-full text-left px-4 py-2 text-sm transition-colors ${language === 'en' ? 'bg-blue-100 text-blue-800 font-medium' : 'text-gray-700 hover:bg-gray-100'}`}
                  >
                    English
                  </button>
                  <button 
                    onClick={() => { setLanguage('zh'); setShowLanguageDropdown(false); }}
                    className={`w-full text-left px-4 py-2 text-sm transition-colors ${language === 'zh' ? 'bg-blue-100 text-blue-800 font-medium' : 'text-gray-700 hover:bg-gray-100'}`}
                  >
                    中文
                  </button>
                </div>
              )}
            </div>
   
            <Link to="/user" className="text-gray-800 hover:text-blue-600 transition-colors" aria-label={t('user')}>
               <i className="fa-solid fa-user text-xl"></i>
            </Link>
          </div>
        </div>

        {/* Mobile Navigation */}
  {isMenuOpen && (
      <div className="fixed inset-x-0 top-0 left-0 right-0 z-50 md:hidden mt-0 py-4 px-2 animate-in fade-in slide-in-from-top duration-300 bg-gradient-to-b from-white to-gray-50 shadow-md rounded-b-2xl border-t border-gray-100">

        <nav className="flex flex-col space-y-2 px-4">
         <Link to="/" className={`font-medium ${scrolled ? 'text-gray-800' : 'text-white'} hover:text-blue-600 hover:bg-blue-50 transition-all py-3 px-4 rounded-lg flex items-center justify-between group`}>
          <span>{t('home')}</span>
          <i className="fa-solid fa-angle-right text-gray-400 group-hover:text-blue-600 transition-colors"></i>
        </Link>
         <Link to="/shop" className={`font-medium ${scrolled ? 'text-gray-800' : 'text-white'} hover:text-blue-600 hover:bg-blue-50 transition-all py-3 px-4 rounded-lg flex items-center justify-between group`}>
          <span>{t('categories')}</span>
          <i className="fa-solid fa-angle-right text-gray-400 group-hover:text-blue-600 transition-colors"></i>
        </Link>
         <Link to="/about" className={`font-medium ${scrolled ? 'text-gray-800' : 'text-white'} hover:text-blue-600 hover:bg-blue-50 transition-all py-3 px-4 rounded-lg flex items-center justify-between group`}>
          <span>{t('about')}</span>
          <i className="fa-solid fa-angle-right text-gray-400 group-hover:text-blue-600 transition-colors"></i>
        </Link>
         <Link to="/contact" className={`font-medium ${scrolled ? 'text-gray-800' : 'text-white'} hover:text-blue-600 hover:bg-blue-50 transition-all py-3 px-4 rounded-lg flex items-center justify-between group`}>
          <span>{t('contact')}</span>
          <i className="fa-solid fa-angle-right text-gray-400 group-hover:text-blue-600 transition-colors"></i>
        </Link>
        </nav>
        
             {/* Mobile Action Icons */}
        <div className="border-t border-gray-100 my-2 pt-2">
          <div className="flex items-center justify-around py-3">
            <button className="text-gray-800 hover:text-blue-600 transition-colors" aria-label={t('search')}>
              <i className="fa-solid fa-search text-xl"></i>
            </button>
            <Link to="/cart" className="relative group" id="cart-icon-container">
              <button className="text-gray-800 hover:text-blue-600 transition-colors" aria-label={t('cart')}>
                <i className="fa-solid fa-shopping-cart text-xl"></i>
              </button>
              {totalItems > 0 && (
                <span className="absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center group-hover:scale-110 transition-transform">
                  {totalItems}
                </span>
              )}
            </Link>
            
            {/* Language Switch */}
            <div className="py-3 px-4">
              <div className="relative" id="mobile-language-dropdown">
                <button 
                  id="mobile-language-button"
                  onClick={() => setShowLanguageDropdown(!showLanguageDropdown)}
                  className="flex items-center justify-between w-full text-left px-4 py-2 rounded-lg text-gray-800 hover:bg-blue-50 transition-colors"
                  aria-label={t('language')}
                >
                  <div className="flex items-center">
                    <i className="fa-solid fa-globe mr-2"></i>
                    <span>{language === 'en' ? 'English' : '中文'}</span>
                  </div>
                  <i className={`fa-solid fa-chevron-down ml-1 text-xs transition-transform ${showLanguageDropdown ? 'rotate-180' : ''}`}></i>
                </button>
                
                {showLanguageDropdown && (
                  <div className="absolute left-4 right-4 mt-2 bg-white rounded-xl shadow-lg py-1 z-50 animate-in fade-in slide-in-from-top-5 duration-200">
                    <button 
                      onClick={() => { setLanguage('en'); setShowLanguageDropdown(false); }}
                      className={`w-full text-left px-4 py-2 text-sm transition-colors ${language === 'en' ? 'bg-blue-100 text-blue-800 font-medium' : 'text-gray-700 hover:bg-gray-100'}`}
                    >
                      English
                    </button>
                    <button 
                      onClick={() => { setLanguage('zh'); setShowLanguageDropdown(false); }}
                      className={`w-full text-left px-4 py-2 text-sm transition-colors ${language === 'zh' ? 'bg-blue-100 text-blue-800 font-medium' : 'text-gray-700 hover:bg-gray-100'}`}
                    >
                      中文
                    </button>
                  </div>
                )}
              </div>
            </div>
            
             <Link to="/user" className={`font-medium ${scrolled ? 'text-gray-800' : 'text-white'} hover:text-blue-600 hover:bg-blue-50 transition-all py-3 px-4 rounded-lg flex items-center justify-between group`}>
              <span>{t('user')}</span>
              <i className="fa-solid fa-angle-right text-gray-400 group-hover:text-blue-600 transition-colors"></i>
            </Link>
          </div>
        </div>
      </div>
  )}
      </div>
    </header>
  );
}